import * as directives from '@/directives'
import { setupStore } from '@/store'
import { injectResponsiveStorage } from '@/utils/responsive'
import Table from '@pureadmin/table'
import { MotionPlugin } from '@vueuse/motion'
import ElementPlus from 'element-plus'
import { createApp, type Directive } from 'vue'
import App from './App.vue'
import { getPlatformConfig } from './config'
import router from './router'
import { IconifyIconOffline, IconifyIconOnline, FontIcon } from './components/ReIcon'

import hljsVuePlugin from '@highlightjs/vue-plugin'
import hljs from 'highlight.js/lib/core'
import json from 'highlight.js/lib/languages/json'

// 引入重置样式
import './style/reset.scss'
// 导入公共样式
import './style/index.scss'
// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
import 'element-plus/dist/index.css'
import './style/tailwind.css'
// 导入字体图标
import './assets/iconfont/iconfont.css'
import './assets/iconfont/iconfont.js'

// svg 相关
import 'virtual:svg-icons-register'

hljs.registerLanguage('json', json)

async function bootstrap() {
  if (import.meta.env.VITE_MOCK_ENABLED === 'true') {
    await import('../mock/browser')
      .then(({ createWorker }) => createWorker())
      .then((worker) =>
        worker.start({
          onUnhandledRequest: 'bypass',
        })
      )
  }

  const app = createApp(App)

  // 自定义指令
  Object.keys(directives).forEach((key) => {
    app.directive(key, (directives as { [key: string]: Directive })[key])
  })

  app.component('IconifyIconOffline', IconifyIconOffline)
  app.component('IconifyIconOnline', IconifyIconOnline)
  app.component('FontIcon', FontIcon)

  getPlatformConfig(app).then(async (config) => {
    app.use(router)
    await router.isReady()

    injectResponsiveStorage(app, config)
    setupStore(app)
    app
      .use(MotionPlugin)
      .use(ElementPlus)
      // .use(useEcharts);
      .use(Table)
      // .use(PureDescriptions);
      .use(hljsVuePlugin)
    app.mount('#app')
  })
}

bootstrap()
